<template>
	<div class="task">
		<div class="btn-wrapper">
			<div class="btn" @click="onpopupNew">
				<div class="btn-left">
					<div class="name">成长任务</div>
					<!-- <div class="precent">3/10</div> -->
				</div>
				<div class="img">
					<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/newTask.png"></image>
				</div>
			</div>
			<div class="btn" @click="onpopupDaily">
				<div class="btn-left">
					<div class="name">日常任务</div>
					<!-- <div class="precent">3/10</div> -->
				</div>
				<div class="img">
					<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/dailyTask.png"></image>
				</div>
			</div>
		</div>
		
		
		<!-- 成长任务 -->
		<van-popup :show="showNew" position="bottom"  round close-on-click-overlay @close="showNew=false">
		    <div class="intergal-wrapper" >
				<div class="header">
					<!-- <image src="/static/img/delbtn-black.png" @click.stop="showNew=false"></image> -->
					<div class="tit">成长任务</div>
				</div>
				<div class="intergal-list-wrapper">
					<div class="intergal-list" v-for="(item,index) of newbie_task" :key="index" >
						<div class="item">
							<div class="item-left">
								<div class="name">{{item.name}}</div>
								<div class="intergal">+{{item.integral}} 积分</div>
							</div>
							<div v-if="item.is_complete!=2" :class="{'item-right':true,'item-cant':item.is_complete==0}" @click="receiveIntegral(item,index,'newbie')">领取</div>
							<div class="item-right item-cant" v-if="item.is_complete==2">已领取</div>
						</div>
					
					</div>
				</div>
				
			</div>
			
		</van-popup>
		<!-- 成长任务end -->
		
		<!-- 日常任务 -->
		<van-popup :show="showDaily" position="bottom"  round :close-on-click-overlay="true" @close="showDaily=false">
		    <div class="intergal-wrapper">
				<div class="header">
					<!-- <image src="/static/img/delbtn-black.png" @click.stop="showDaily=false"></image> -->
					<div class="tit">日常任务</div>
				</div>
				<div class="intergal-list">
					<div class="item" v-for="(item,index) of daily_task" :key="index" >
						<div class="item-left">
							<div class="name">{{item.name}}</div>
							<div class="intergal">+{{item.integral}} 积分</div>
						</div>
						<div class="item-right " v-if="item.is_complete==1" @click="receiveIntegral(item,index,'daily')">领取</div>
						<button type="primary" size="mini" open-type="share" class="share-btn" v-if="item.is_complete==0">分享给好友</button>
					</div>
					
					
				</div>
			</div>
			
		</van-popup>
		<!-- 日常任务end -->
	</div>
</template>

<script>
	export default{
		data(){
			return{
				showNew:false,
				showDaily:false,
				newbie_task:[],//成长任务
				daily_task:[]
			}
		},
		methods:{
			onpopupNew(){
			    if (this.showNew){
			        this.showNew = false;
			    } else {
					this.getTaskList()
			        this.showNew = true;
			    }
			
			},
			onpopupDaily(){
				if (this.showDaily){
				    this.showDaily = false;
				} else {
					this.getTaskList()
				    this.showDaily = true;
				}
			},
			async getTaskList(type='newBie_task'){
				//获取任务
				let params={
					user_token:uni.getStorageSync('userToken'),
					type:type
				}
				let res=await this.$api.getTaskList(params);
				if(res.data.level=='success'){
					this.daily_task=res.data.daily_task;
					this.newbie_task=res.data.newbie_task;
				}
			},
			async receiveIntegral(item,index,type){
				//完成任务
				let params={};
				if(type=='newbie'){
					params={
						user_token:uni.getStorageSync('userToken'),
						task_id:item.id
					}
				}else{
					params={
						user_token:uni.getStorageSync('userToken'),
						task_id:item.id,
						id:item.user_task_info.id
					}
				}

				let res=await this.$api.receiveIntegral(params);
				if(res.data.level=='success'){
					if(type=='newbie'){
						this.newbie_task[index].is_complete=2
					}else{
						this.daily_task[index].is_complete=0
					}
					
					this.$emit('updateIntergal');//更新积分信息
				}
				uni.showToast({
					icon:'none',
					title:res.data.message,
					duration:3000
				})
			}
		},
		mounted() {
			// this.getTaskList()
		}
		
	}
</script>

<style scoped lang="scss">
	@import '~@/static/scss/mixin.scss';
	.task{
		width: 100%;
	}
	.btn-wrapper{
		@include flex(space-between);
		margin:40rpx 30rpx 0 30rpx;
		.btn{
			background: #fff;
			@include flex(space-between);
			padding:20rpx;
			border-radius: 10rpx;
			width:48% ;
			box-sizing: border-box;
			.btn-left{
				.name{
					font-size:32rpx;
					font-weight:600;
					line-height:32rpx;
					// margin-bottom: 30rpx;
				}
				.precent{
					color:#8B8D93;
					font-size:26rpx;
					font-weight:600;
					line-height:26rpx;
				}
			}
			.img{
				image{
					width:72rpx;
					height: 72rpx;
				}
			}
			
		}
	}
	
	//弹出框
	.intergal-wrapper{
		min-height: 500rpx;
		.header{
			position: relative;
			background-color: #F1F4F7;
			image{
				width:40rpx;
				height: 40rpx;
			}
			padding:20rpx;
			.tit{
				// position: absolute;
				// top:20rpx;
				// left:50%;
				// transform: translateX(-50%);
				text-align: center;
				font-size:32rpx;
				font-weight:600;
				color:rgba(0,0,0,1);
				line-height:32rpx;
			}
		}
		
		.intergal-list-wrapper{
			max-height: 500rpx;
			overflow-y: scroll;
		}
		.intergal-list{
			padding:20rpx;
			.item{
				@include flex(space-between);
				position: relative;
				margin:30rpx 0;
				.item-left{
					.name{
						height:30rpx;
						font-size:30rpx;
						line-height:30rpx;
					}
					.intergal{
						color:#FD5F2A;
						margin-top:40rpx;
						
					}
				}
				.item-right{
					background-color: #FFE226;
					font-size:30rpx;
					line-height:30rpx;
					font-weight: 500;
					padding:10rpx 40rpx;
					border-radius: 16rpx;
				}
				.item-cant{
					background-color: #F1F4F7;
				}
				.share-btn{
					position: absolute;
					right: 0;
				}
			}
		}
	}
</style>
